<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/interface.js"></script>
    <style>
        .goods-list {
            width: 1226px;
            margin: 0px auto;
        }

        .goods-list .list {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            font-size: 14px;
        }

        .goods-list .list li {
            width: 18%;
            box-sizing: border-box;
            padding: 5px;

        }

        .goods-list .list li:not(:nth-child(5n+1)) {
            margin-left: 2.5%;
        }

        .goods-list .list li img {
            width: 170px;
            height: 170px;

            display: block;
            margin: 20px auto;
        }

        .goods-list .list li .price {
            color: #e4393c;
        }

        .goods-list .list li .desc {
            font-size: 12px;
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="goods-list">
        <ul class="list">
            <!-- <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li>
            <li>
                <a href=""><img
                        src="https://img10.360buyimg.com/n7/jfs/t1/188285/12/16746/113265/610a0d0cE38c7e9de/e3b0bea39404d083.jpg.avif"
                        alt=""></a>
                <div class="price">￥59.00</div>
                <div class="desc">华为（HUAWEI）6A数据线充电线 USBType-C转USBType-C/线长1.8m/高品</div>
            </li> -->
        </ul>
    </div>
</body>
<script>
    $(async function () {

        var result = await searchAllGoods();

        console.log(result);

        var { status, message, list } = result;

        if (status) {

            if (list) {

                var html = "";
                list.forEach(({ id, title, img, comment, price }) => {
                    html += `<li>
                <a href="./detail.html?id=${id}"><img
                        src="${img}"
                        alt=""></a>
                <div class="price">￥${price}</div>
                <div class="desc">${title}</div>
            </li>`
                })
                $(".list").html(html);
            }

        }


    })




</script>

</html>